<template>
  <el-dialog
    :before-close="beforeClose"
    :visible.sync="show"
    :title="title"
    width="35%"
    append-to-body
    @close="close"
    @closed="closed"
  >
    <el-row>
      <!-- <el-col :span="8">
        <p>个人实名照片</p>
        <el-image
          style="width: 150px; height: 150px"
          fit="contain"
        />
      </el-col> -->
      <el-col :span="12">
        <el-card class="box-card">
          <div class="text item">
            姓名:{{ form.real_name }}
          </div>
          <div class="text item">
            性别:{{ sex }}
          </div>
          <div class="text item">
            出生日期:{{ birth }}
          </div>
          <div class="text item">
            身份证号码:{{ form.id_card }}
          </div>
          <div class="text item">
            手机号码:{{ form.mobile }}
          </div>

          <div class="text item">
            现居地址:{{ form.live_province_name+'/'+form.live_city_name+'/'+form.live_area_name+'/'+form.live_street_name }}
          </div>
          <div class="text item">
            详细地址:{{ form.live_address }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div class="text item">
            人才引进:{{ form.item }}
          </div>
          <div class="text item">
            就业情况:{{ form.item }}
          </div>
          <div class="text item">
            在职公司:{{ form.companyName }}
          </div>

          <div class="text item">
            公司地址:{{ form.companyHouseAddress }}
          </div>

        </el-card>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import _ from 'lodash'
import { userInfo } from '@/api/user'
import { getBirth, getSex } from '@/utils/common'
export default {
  name: 'Index',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'view'
    },
    data: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      show: false,
      form: {
        ssq: '',
        street: '',
        admin: '',
        remark: '',
        company: {}
      }
    }
  },
  computed: {
    title() {
      let text = ''
      switch (this.type) {
        case 'view':
          text = '查看'
          break
        case 'create':
          text = '新建'
          break
        case 'edit':
          text = '编辑'
          break
      }
      return text
    },
    sex() {
      return getSex(this.form.id_card)
    },
    birth() {
      return getBirth(this.form.id_card)
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
        this.getData()
      }
    }
  },
  mounted() {
    this.show = this.visible
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    getData() {
      userInfo(this.data).then(p => {
        this.form = p.data
      })
      this.form.companyName = _.get(this.form, 'company.name', '')
      this.form.companyHouseAddress = _.get(this.form, 'company.house_address', '')
      if (!this.form.company) {
        this.form.company = {}
      }
      console.log('获取数据')
    },
    handleClose() {
      console.log('点击关闭')
      this.beforeClose()
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false
      this.$emit('update:visible', false)
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
    }
  }
}
</script>

<style scoped>
    .box-card{
        margin: 10px;
    }
    .text {
    font-size: 14px;
    }

    .item {
    padding: 18px 0;
    }
</style>
